<template>
    <el-dialog id="permission-tree"  title="权限配置" :visible.sync="showDialog"  append-to-body width="500px">
        <el-tree 
			ref="eltree" 
			node-key="id"  
			:props="treeProps" 
			:data="pmsTree" 
			show-checkbox 
			@check-change="onNodeCheked"
		></el-tree>
        <div class="button-bar">
            <el-button size="small" @click="onCancel">取 消</el-button>
            <el-button size="small" type="primary" @click="onConfirm">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
    props:{
        initData:{
            type:String,
            default:'',
            require:false
        },
		pmsTree:{
			type:Array,
			default:()=>[],
			require:true
		}
    },
    data(){
        return{
            showDialog:false,
            treeProps:{
                label:"name"
            },
            checkedPms:[],
        }
    },
    watch:{
        initData(newVal){
            this.checked=[]
            this.$refs.eltree.setCheckedKeys([])
            this.getPermissionList()
        }
    },
    methods:{
        //获取角色有效权限
        getPermissionList(){
			if(!this.initData){
				return
			}
            var submitData={roleId:this.initData}
            this.$http.getPermission(submitData)
            .then((res)=>{
                var data=res.data.data;
				this.checkedPms=data.checkedIds;
                this.$nextTick(()=>{
					if(this.checkedPms.length!=0){
						this.$refs.eltree.setCheckedKeys(this.checkedPms)
					}
                })
                
            }).catch((err)=>{
                if(!err.data || !err.data.message){
                    window.message.close()
					window.message= this.$message({
						type:'error',
						message:'查询角色权限数据失败!',
						showClose:true,
					})
                }
                throw(err)
            })
            
        },

        onNodeCheked(data, checked, indeterminate){
            var halfChecked=this.$refs.eltree.getHalfCheckedKeys();//半选节点
            var allChecked=this.$refs.eltree.getCheckedKeys()//全选节点
            this.checkedPms=halfChecked.concat(allChecked)
           
        },

        onCancel(){
            this.showDialog=false
        },

        onConfirm(){
            if(this.checkedPms.length==0){
                this.$message.warning("角色权限不能为空!")
                return
            }
            var submitData={
                roleId:this.initData,
                permissions:this.checkedPms.toString(),
            }
            
            this.$http.setPermission(submitData)
            .then((res)=>{
               this.$message({
                   type:"success",
                    showClose: true,
                    message: '配置权限成功!'
               })
            }).catch((err)=>{
                if(!err.data || !err.data.message){
                    window.message.close()
                    window.message= this.$message({
                        type:'error',
                        message:'程序出错,操作失败!',
                        showClose:true,
                    })
                }
                throw(err)
            })
            this.showDialog=false
        },

    },

    created(){
        this.getPermissionList()
    },
    
   
}
</script>
<style lang="scss" scoped>

.button-bar{
    text-align:center;
}

/deep/ .el-dialog{
    display: flex;
    flex-direction: column;
    .el-dialog__body{
        flex:1;
        overflow: auto;
        padding:0px 20px;
        display: flex;
        flex-direction: column;
        .el-tree{
            flex: 1;
            overflow: auto;
        }
        .button-bar{
            padding: 20px 0px;
        }
    }
}


</style>


